<template>
  <div class="app-container">
    <el-card>
      <div style="padding: 20px 0" v-if="activeLab">
        实验室开放时间段：{{ activeLab?.startTime }}~{{ activeLab?.endTime }}
      </div>
      <el-row>
        <el-col :span="5">
          <el-select
            v-model="labId"
            placeholder="请选择实验室"
            style="width: 240px"
            @change="labChange"
          >
            <el-option
              v-for="item in labList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-col>

        <el-col :span="8" v-if="activeLab">
          <el-date-picker
            v-model="time"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            date-format="YYYY-MM-DD"
            time-format="hh:mm:ss"
            @change="timeChange"
          />
        </el-col>

        <el-col :span="5" v-if="activeLab && time.length > 0">
          <el-button type="primary" @click="query"> 查询 </el-button>
        </el-col>
      </el-row>

      <div class="seat-box" v-if="activeLab && time.length > 0">
        <div class="seat-item" v-for="item in seatList" :key="item.id">
          <div class="status" v-if="item.status == 0">
            <el-tag type="succrss">空闲</el-tag>
          </div>
          <div class="status" v-if="item.status == 1">
            <el-tag type="danger">占用</el-tag>
          </div>

          <div class="no">{{ item!.seatNo }}号</div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import {} from "@/api/book/index";
import { getListLabAPI } from "@/api/lab/index";
import { ILab } from "@/api/lab/types";
import { getSeatListByLabIdAPI } from "@/api/seat/index";
import { ISeat } from "@/api/seat/types";
import { addBookingAPI } from "@/api/book/index";
import { ref, reactive } from "vue";

const labId = ref<number>();
const labList = ref<ILab[]>([]);
const getLabList = async () => {
  const res = await getListLabAPI();
  labList.value = res.data;
};

const seatList = ref<ISeat[]>([]);
const getSeatList = async () => {
  const res = await getSeatListByLabIdAPI({
    labId: activeLab.value?.id,
    startTime: time.value[0],
    endTime: time.value[1],
  });
  seatList.value = res.data;
};

const activeLab = ref<ILab>();

const labChange = (labId: number) => {
  const lab = labList.value.find((item) => item.id == labId);
  activeLab.value = lab!;
};

const time = ref<string[]>([]);

const timeChange = (cTime: string[]) => {
  console.log(cTime);
  const start = cTime[0];
  const end = cTime[1];
  if (start.split(" ")[0] != end.split(" ")[0]) {
    time.value = [];
    ElMessage.error("只能选择同一天的时间");
  }

  const labStartTime = parseTimeStringToTimeObject(activeLab.value?.startTime!);
  const labEndTime = parseTimeStringToTimeObject(activeLab.value?.endTime!);
  const startTime = parseTimeStringToTimeObject(start.split(" ")[1]);
  const endTime = parseTimeStringToTimeObject(end.split(" ")[1]);
  if (!(labStartTime <= startTime && labEndTime >= endTime)) {
    time.value = [];
    ElMessage.error("只能选择实验室开放的时间段");
  }
};

const parseTimeStringToTimeObject = (timeString: string): Date => {
  const [hours, minutes, seconds] = timeString.split(":").map(Number);
  const time = new Date();
  time.setHours(hours, minutes, seconds);
  return time;
};

const query = () => {
  getSeatList();
};

onMounted(() => {
  activeLab.value = undefined;
  time.value = [];
  getLabList();
});
</script>

<style lang="scss" scoped>
.seat-box {
  width: 100%;
  flex-wrap: wrap;
  margin-top: 20px;
  display: flex;
  justify-content: space-around;

  .seat-item {
    width: 110px;
    text-align: center;
    margin-right: 10px;
    margin-bottom: 10px;
    box-shadow: 1px 1px 5px #ccc;
    .status {
      height: 40px;
      line-height: 40px;
    }
    .no {
      height: 40px;
      line-height: 40px;
    }
    .status {
      height: 40px;
      line-height: 40px;
    }
    .no {
      height: 40px;
      line-height: 40px;
    }
  }
  .seat-item:hover {
    cursor: pointer;
    transform: scale(1.05);
  }
}
</style>
